<template>
	<view class="page flex flex-col">
		<navbar :leftText="'团队详情'" :backStatus="true"></navbar>
		<view class="w690 flex-1" style="overflow-y: hidden;">
			<!-- 设备列表 -->
			<view class="flex flex-col " style="overflow-y: hidden;height:98%;">
				<view class="shouYiHead showLine">
					<up-row>
						<up-col span="3">
							<view>会员</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center">电话</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center">团队人数</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center">设备数量</view>
						</up-col>
					</up-row>
				</view>
				<view id="teamDevice" class="flex flex-col" style="overflow-y: hidden;background-color: #11102A;">
					<view v-if="teamDetailList.length>0">
						<scroll-view :style="{ height: scrollHeight }" class="scroll-view_H flex-1" scroll-y="true"
							@scroll="scroll" @scrolltolower="teamlower">
							<up-row v-for="(item,index) in teamDetailList"
								customStyle="height:100rpx;border-bottom:2rpx solid #1F1757">
								<up-col span="3">
									<view>{{item.name || '--'}}</view>
								</up-col>
								<up-col span="3">
									<view class="flex-center">{{item.mobile}}</view>
								</up-col>
								<up-col span="3">
									<view class="flex-center">{{item.teamMemberNum || '--'}}</view>
								</up-col>
								<up-col span="3">
									<view class="flex-center">{{item.teamDeviceNum || '--'}}</view>
								</up-col>
							</up-row>
						</scroll-view>
					</view>

					<view v-else class="flex-center" :style="{ height: scrollHeight }">
						<noData :width="250" :height="250"
							:imgUrl="'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif'"></noData>
					</view>
				</view>

			</view>

		</view>



	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';


	const scrollHeight = ref(0);

	const memberId = ref(0);

	onLoad((ops) => {
		console.log("ops", ops);
		if (ops.toUid) {
			memberId.value = ops.toUid;
		}

	})

	// onShow(() => {
	// 	getDeviceDetail(deviceCode.value)
	// })

	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		// imageUrl.value = globalData.value.imgOssUrl;

		uni.getSystemInfo({
			success: function(res) {
				const query = wx.createSelectorQuery()
				query.select('#teamDevice').boundingClientRect()
				// 获取滚动容器css数据
				query.exec((resData) => {
					console.log("resData", resData);
					if (resData && resData.length) {
						// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
						scrollHeight.value = res.windowHeight - resData[0].top + 'px'
					}
				})
			}
		})

		// 获取团队设备列表
		getTeamDetailDevice()
	})

	// 团队设备列表
	const teamDetailList = ref([])

	// 团队设备总数
	const teamListTotal = ref(0);

	const pageNumber = ref(1);

	const pageSize = ref(40)

	// 获取团队设备列表
	const getTeamDetailDevice = () => {
		let e = {
			url: '/app-api/device/team-leader',
			data: {
				pageNo: pageNumber.value,
				pageSize: pageSize.value,
				levelId: uni.getStorageSync("levelId"),
				deviceType: "router",
				memberId: memberId.value
			}
		};
		api.default.get(e).then((res) => {

			if (pageNumber.value == 1) {
				teamDetailList.value = res.data.list;
			} else {
				teamDetailList.value = teamDetailList.value.concat(res.data.list);
			}

			teamListTotal.value = res.data.total

			// zongTeamShowYi.value = res.data;
		})
	}

	// 上拉刷新
	const teamlower = () => {
		if (teamListTotal.value > teamDetailList.value.length) {
			pageNumber.value++;

			// 调用分润列表
			getTeamDetailDevice()
		}
	}
</script>

<style scoped>
	.shouYi {
		color: #fff;
		margin-top: 40rpx;
	}

	.shouYiHead {
		font-size: 24rpx;
		color: #5A669E;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #1F1757;
	}

	.scroll-view_H {
		font-size: 28rpx;
		overflow: hidden;
		color: #fff;
		/* background-color: #e43; */
	}
</style>